<template>
  <div style="width: 100%; height: 100%; background: #f5f5f5">
    <div style="width: 100%; background: #f5f5f5">
      <van-nav-bar
        left-arrow
        @click-left="onClickLeft"
        :right-text="righttype ? '管理' : '取消'"
        @click-right="rightchange"
      >
      </van-nav-bar>
      <div style="text-align: center">
        <img
          src="../../assets/imgs/home/logo-title.png"
          style="margin: 25px auto; width: 90px; height: 90px"
          alt=""
        />
      </div>
      <van-radio-group v-model="chosenAddressId">
        <div v-for="item in list" :key="item.id">
          <div
            style="
              width: 92%;
              background: white;
              font-size: 14px;
              margin: 10px auto;
            "
            @click="getid(item.id)"
          >
            <div
              style="
                padding: 10px 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
            >
              <div style="display: flex; align-items: center">
                <img
                  style="height: 48px; width: 48px"
                  :src="item.head_image"
                  alt=""
                />
                <div style="margin-left: 10px">
                  <!-- <div>{{ item.nick_name }}</div> -->
                  <div style="color: #333; font-size: 15px">
                    账号: {{ item.member }}
                  </div>
                </div>
              </div>

              <div>
                <div
                  v-if="!righttype"
                  class="dek"
                  @click.stop="deleteuser(item.id)"
                >
                  删除
                </div>
              </div>
            </div>
            <div>
              <!-- <van-checkbox
                size="13"
                v-model="item.is_check"
                @click="getid(item)"
                >设置默认地址
              </van-checkbox> -->
              <!-- <div style="display: flex; align-items: center">
                <van-icon
                  name="delete"
                  style="margin-left: 15px"
                  @click="delAddress(item.id)"
                />
                <span style="margin-left: 5px" @click="delAddress(item.id)"
                  >删除</span
                >
              </div> -->
            </div>
          </div>
        </div>
      </van-radio-group>
      <!-- <van-button @click="onAdd" type="danger">添加地址</van-button> -->
    </div>
  </div>
</template>
<script>
import area from "@/utils/area.js";
import {
  addressList,
  deleteAddress,
  editAddress,
  checkMember,
} from "../../api/home";
export default {
  data() {
    return {
      chosenAddressId: "",
      righttype: true,
      list: [],

      areaList: area,
      form: {},
      value: "",
      star: true,
      type: "1",
      carshow: false,
      headtype: true,
      activeIndex: 0, //规格默认
      slides: [],
      show: false,
      goodsValue: 1,
      goodsId: "",
      goodsInfo: {},
      checked: true,
      freight: "",
      goodsSize: [],
      chooseSize: {},
      colorType: "选择颜色",
      shop: {
        goods_attribute: "",
        number: "",
      },
      sku: {
        tree: [
          {
            k: "颜色",
            v: [],
            k_s: "s1",
          },
        ],
        list: [],
        price: "", //？？
        stock_num: "", // 商品总库存？？
        none_sku: false, // 是否无规格商品 false正常显示那些可供选择的标准，此处是颜色和尺寸
        hide_stock: false, // 是否隐藏剩余库存 false正常显示剩余多少件的那个库存
      },
      showBase: true, //sku的框的显示
      showCustom: false,
      showStepper: false,
      showSoldout: false,
      closeOnClickOverlay: true, //点击空白处关闭购物框

      goods: {},
      starform: {},
      iamgeslide: [],
      messageConfig: {},
      goodstype: [],
      userphone: {},
      customStepperConfig: {},
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    rightchange() {
      this.righttype = !this.righttype;
    },
    deleteuser(id) {
      deleteAddress({ id }).then((res) => {
        this.getlist();
      });
    },
    delAddress(id) {
      deleteAddress({ id }).then((res) => {
        this.getlist();
      });
    },
    getlist() {
      addressList().then((res) => {
        this.list = res;
      });
    },
    getid(e) {
      console.log(e);
      this.$dialog
        .alert({
          message: "是否切换账号",
          theme: "round-button",
        })
        .then(() => {
          checkMember({ id: e }).then((res) => {
            this.getlist();
            localStorage.setItem("usertoken", res.app_token);
          });
        });
    },
    onAdd() {
      this.$router.push({ name: "address" });
    },
    onEdit(item, index) {
      this.$router.push({
        name: "address",
        query: { item: JSON.stringify(item) },
      });
    },
    getaddress(e) {
      this.form.addressProvince = e[0].name;
      this.form.addressCity = e[1].name;
      this.form.addressArea = e[2].name;
      this.form.addressall = e[0].name + e[1].name + e[2].name;
      this.show = false;
    },
    submit() {
      if (this.checked) {
        this.form.addressDefault = 1;
      } else {
        this.form.addressDefault = 0;
      }
      addressadd(this.form).then((res) => {
        console.log(res);
      });
    },
    check(e) {
      this.type = e;
    },
    telphone() {
      window.location.href = `tel:${this.userphone.customer_service_phone}`;
    },
    checkgoods(value) {
      this.shop.goods_attribute = value;
      this.checked = value;
    },
    // getlist(){

    // 	goodsInfo({
    // 		id: this.$route.query.id
    // 	}).then(res => {
    // 		let arr=[]
    // 		let image=[]
    // 		this.goodsInfo = res.data[0]
    // 		this.goodsInfo.images.split(',').map((i,x)=>{
    // 			image.push({
    // 				value:i
    // 			})
    // 		})
    // 		this.iamgeslide=image
    // 		this.starform.goods_id=res.id
    // 	})
    // },
    Clickstar(value) {
      if (value == 0) {
        this.starform.type = 1;
      } else {
        this.starform.type = 0;
      }
      collectionStatus(this.starform).then((res) => {
        this.getlist();
      });
    },
    changesku(value) {},
    addCar() {
      this.carshow = true;
    },
    onClickLeft() {
      this.$router.go(-1);
    },

    onBuyClicked() {
      if (this.shop.goods_attribute == "") {
        this.$toast("请选择商品规格");
        return false;
      }
      let data = {
        goods_id: this.starform.goods_id,
        goods_attribute: this.shop.goods_attribute,
        number: this.shop.number,
      };
      this.$router.push({
        path: `payOrder`,
      });

      localStorage.setItem("goods", JSON.stringify(data));
    },
    onAddCartClicked() {
      let data = {
        goods_id: this.starform.goods_id,
        goods_attribute: this.shop.goods_attribute,
        number: this.shop.number,
      };
      addShopping(data).then((res) => {
        this.$toast("成功加入购物车!");
        this.carshow = false;
      });
    },
    toShowShopCar() {
      this.show = true;
    },
    goShowPay() {
      this.show = true;
    },
    // 选择规格
    getSize(item, index) {
      this.activeIndex = index;
      this.chooseSize = item;
    },

    chooseShow() {
      this.show = true;
    },
  },
};
</script>
<style lang="less" scoped>
.dek {
  background: #ff4e24;
  color: white;
  padding: 4px 10px;
  border-radius: 5px;
}
.van-nav-bar {
  background: transparent;

  /deep/.van-nav-bar__title {
    color: #333;
  }

  /deep/ .van-icon {
    color: #333;
  }
  /deep/ .van-nav-bar__text {
    color: #333;
  }
}

/deep/.van-goods-action-button--danger {
  background: #326964 !important;
}
/deep/.van-radio__icon--checked .van-icon {
  background: rgb(254, 97, 66);
  border: none;
}
.van-tag--danger {
  background: #326964;
}
.van-address-list__bottom {
  padding: 0;
}
.van-button--danger {
  position: fixed;
  bottom: 0;
  width: 100%;
  margin: 0;
  color: white;
  border-radius: 0;
  border: none;
  background: #326964;
}
.van-picker {
  width: 100%;
  position: fixed;
  bottom: 0;
  background: white;
}
.butdeatil {
  margin: 90px auto;
  width: 90%;
  border-radius: 25px;
  font-size: 18px;
  padding: 8px 10px;
  text-align: center;
  color: #78482f;
  background: linear-gradient(to right, #ecd6ad, #fbedd0, #ecd6ad);
}

/deep/.htmlcls {
  padding-bottom: 60px;
  font-size: 14px;
  div,
  p,
  ul,
  li,
  ol {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  img {
    width: 100%;
  }
}
.back-but {
  width: 30px;
  height: 30px;
  position: absolute;
  z-index: 9;
  top: 15px;
  left: 15px;
}
.van-button--default {
  width: 50%;
  border-radius: 25px 0 0 25px;
  color: white;
  background: -webkit-linear-gradient(left, #ffd01e, #ff8917);
  width: 50%;
  border: none;
}
.van-button--primary {
  width: 100%;
  border-radius: 25px;
  background: #fe881e;
  background: -webkit-linear-gradient(left, #ff6034, #ee0a24);
  border: none;
}
.car-nav {
  padding: 15px;
  .car-nav-bot {
    padding: 10px 0 15px 0;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    .nav-bot-check {
      margin-top: 5px;
      padding: 0 6px;
      background: #eeeeee;
      margin-left: 5px;
      height: 30px;
      line-height: 30px;
      border-radius: 5px;
      text-align: center;
    }
    .nav-bot-checked {
      padding: 0 6px;
      margin-top: 5px;
      background: rgba(165, 217, 181, 1);
      color: #02ab36;
      border: 1px solid #02ab36;
      margin-left: 5px;
      height: 30px;
      line-height: 30px;
      border-radius: 5px;
      text-align: center;
    }
  }
  .car-nav-top {
    display: flex;
    justify-content: start;
    align-items: center;
    .nav-top-right {
      margin-left: 10px;
      color: #ff6a19;
    }
  }
}
.check {
  color: #ff6b1a;
  border-bottom: 1px solid #ff6b1a;
}

.checkfalse {
}

.head-cls {
  display: flex;
  width: 90px;
  justify-content: space-between;
}

.van-img {
  width: 100%;
  height: 270px;
}

.detailsMid {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 20px;
  color: #333;
  font-size: 13px;
  .goodsName {
    display: flex;
    justify-content: space-between;
    color: #666666;
    font-size: 12px;
  }
  .price1 {
    margin-bottom: 8px;
    color: #ff3333;
    font-size: 18px;

    span {
      &:last-child {
        display: inline-block;
        margin-left: 14px;
        color: #ff3333;
        font-size: 11px;
        padding: 1.5px 6.5px;
        border-radius: 4px;
        border: 1px solid #ff0000;
      }
    }
  }

  .price2 {
    margin-bottom: 5px;
    font-size: 15px;
  }

  .goodsSize {
    margin-top: 11px;

    span {
      color: #999;

      &:last-child {
        margin-left: 33px;
      }
    }
  }
}

.gap {
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: darkgray;
}

.descTitle {
  color: #333;
  font-size: 17px;
  text-align: center;
  margin: 15px auto;
}

.freight {
  margin-top: 7px;
  font-size: 15px;

  span {
    color: #de4f53;
  }
}

.van-popup {
  font-size: 13px;
  color: #999;
}

.popWrap {
  padding: 14.5px 13.5px 5px 16px;
  width: 100%;
  box-sizing: border-box;
}

.popTop {
  padding-bottom: 14.5px;
  overflow: hidden;
  border-bottom: 1px solid #d2d2d2;
}

.popImg {
  width: 70.5px;
  height: 70.5px;
  margin-right: 13px;
  border-radius: 6px;
}

.popNow {
  color: #de4f53;
  font-size: 15px;
}

.popOld {
  margin: 13.5px 0 12px;
  text-decoration: line-through;
}

.popMid {
  padding: 5px 0 12.5px;
  border-bottom: 1px solid #d2d2d2;
}

.midTitle {
  color: #333;
}

.chooseWrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.chooseItem {
  border: 1px solid #999;
  padding: 3.5px;
  width: 25%;
  text-align: center;
  border-radius: 2px;
  margin-bottom: 10px;
  margin-right: 20px;
}

.chooseItem:nth-of-type(3n) {
  margin-right: 0;
}

.blankItem {
  border: 0 none;
}

.choosedSize {
  background: #ffbbbb;
  border: 0 none;
  color: #ff0101;
}

.popNum {
  padding-top: 16.5px;
  color: #333;
  margin-bottom: 18px;
}

.popBtn {
  padding: 0 3%;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  background: #fff;
  height: 52.5px;
  z-index: 1000;
  // padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;

  .van-button {
    height: 27px;
    border: 0 none;
    font-size: 14px;
    // width: 92%;
    color: #fff;
    line-height: 27px;
    padding: 0;
    border-radius: 13.5px;
  }

  .carBtn {
    background: #1e854c;
    margin-right: 2.5px;
  }

  .buyBtn {
    width: 94%;
    margin-left: 3%;
    background: #fe881e;
    border-radius: 25px;
    height: 40px;
  }
}

.detailsDesc {
  font-size: 15px;
  margin-bottom: 70px;

  .detailsDesc-title {
    padding: 10px 0;
    text-align: center;
    color: #666666;
  }

  /deep/ img {
    width: 100%;
    height: auto;
    display: block;
  }
}

.showBtn {
  position: relative;
}
/deep/.van-field__label {
  color: black;
}
</style>
